<template>
	<div class="adm-page" :class="skin" :style="{backgroundImage: 'url(' + bg + ')'}">
		<Head @getData="getData" />
		<div class="bs-panel">
			<div class="bs-filter flex">
				<div class="fil-label">办案中心类型：</div>
				<div class="flex_bd">
					<el-radio-group v-model="styleV" size="small" @change="change">
						<el-radio v-for="(item,index) in filstyles" v-show="index < filshow" :key="index"
							:label="item.value" border>{{item.title}}</el-radio>
					</el-radio-group>
				</div>
				<div class="fil-select" @click="filToggle">
					<div v-if="filshow == 10"><span>展开</span><span class="el-icon-arrow-down"></span></div>
					<div v-else><span>收起</span><span class="el-icon-arrow-up"></span></div>
				</div>
			</div>
			<div class="bs-filter flex-center">
				<div class="fil-label">其他选项：</div>
				<div class="flex_bd flex-center fil-form">
					<el-form size="small" :inline="true" ref="form" :model="form">
						<el-form-item label="作者">
							<el-select v-model="form.author" placeholder="请选择">
								<el-option label="不限" value="1"></el-option>
								<el-option label="区域一" value="2"></el-option>
								<el-option label="区域二" value="3"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="好评度">
							<el-select v-model="form.raty" placeholder="请选择">
								<el-option label="不限" value="1"></el-option>
								<el-option label="区域一" value="2"></el-option>
								<el-option label="区域二" value="3"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
				</div>
				<div class="fil-button">
					<el-button size="small" type="primary">查询</el-button>
					<el-button size="small" type="default">清空</el-button>
				</div>
			</div>
		</div>
		<div class="bs-panel">
			<div class="bs-panel_bd">
				<ul class="user-data user-lg-data flex-center">
					<li class="flex-col" v-for="item in dataList" :key="item">
						<div class="value" :style="{'color': item.color}"><span class="v">{{item.value}}</span>个</div>
						<div class="txt">{{item.text}}</div>
					</li>
				</ul>
			</div>
		</div>
		<el-row :gutter="12">
			<el-col :span="18">
				<ul class="inspec-list clear">
					<li>
						<div class="ins-panel flex-center">
							<div class="ins-menu" @click="dialogFormVisible = true">
								<i class="el-icon-circle-plus"></i><span>新增服务</span>
							</div>
						</div>
					</li>
					<li v-for="(item,index) in lists" :key="index">
						<div class="ins-panel">
							<div class="ins-cell">
								<img :src="item.icon" class="ins-icon">
								<div class="flex_bd">
									<div class="title ellipsis">{{item.title}}</div>
									<div class="desc line-2">{{item.desc}}</div>
								</div>
							</div>
							<div class="ins-button">
								<div class="btn">编辑</div>
								<div class="btn">预览</div>
							</div>
						</div>
					</li>
				</ul>
			</el-col>
			<el-col :span="6">
				<div class="bs-panel ins-echart-panel">
					<div class="ins-echart" id="myChart"></div>
					<div class="ins-echart" id="myChart2"></div>
				</div>
			</el-col>
		</el-row>
		<!-- 弹出 -->
		<el-dialog title="新增服务" :visible.sync="dialogFormVisible">
			<el-form ref="dialogForm" :model="dialogForm" label-width="80px">
				<el-form-item label="活动名称">
					<el-input v-model="dialogForm.name"></el-input>
				</el-form-item>
				<el-form-item label="活动区域">
					<el-select v-model="dialogForm.region" placeholder="请选择活动区域">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="活动时间">
					<el-col :span="11">
						<el-date-picker type="date" placeholder="选择日期" v-model="dialogForm.date1" style="width: 100%;">
						</el-date-picker>
					</el-col>
					<el-col class="line" :span="2">-</el-col>
					<el-col :span="11">
						<el-time-picker placeholder="选择时间" v-model="dialogForm.date2" style="width: 100%;"></el-time-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="即时配送">
					<el-switch v-model="dialogForm.delivery"></el-switch>
				</el-form-item>
				<el-form-item label="活动性质">
					<el-checkbox-group v-model="dialogForm.type">
						<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
						<el-checkbox label="地推活动" name="type"></el-checkbox>
						<el-checkbox label="线下主题活动" name="type"></el-checkbox>
						<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item label="特殊资源">
					<el-radio-group v-model="dialogForm.resource">
						<el-radio label="线上品牌商赞助"></el-radio>
						<el-radio label="线下场地免费"></el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="活动形式">
					<el-input type="textarea" v-model="dialogForm.desc"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">立即创建</el-button>
					<el-button>取消</el-button>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
	import echarts from 'echarts'
	// @ is an alias to /src
	import Head from '@/components/Head.vue'
	export default {
		name: 'Home',
		components: {
			Head
		},
		data() {
			return {
				dialogFormVisible: false,
				dialogForm: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				styleV: "1",
				filshow: 10000,
				dataList: [{
						text: '审核中',
						value: '55',
						color: '#0080ff'
					},
					{
						text: '未通过',
						value: '6',
						color: '#ff0000'
					},
					{
						text: '今日发布',
						value: '8',
						color: '#0080ff'
					}
				],
				filstyles: [{
						title: '全部',
						value: '1',
					},
					{
						title: '类目一',
						value: '2',
					},
					{
						title: '类目二',
						value: '3',
					},
					{
						title: '类目三',
						value: '4',
					},
					{
						title: '类目四',
						value: '5',
					},
					{
						title: '类目五',
						value: '6',
					},
					{
						title: '类目六',
						value: '7',
					},
					{
						title: '类目七',
						value: '8',
					},
					{
						title: '类目八',
						value: '9',
					},
					{
						title: '类目九',
						value: '10',
					},
					{
						title: '类目十',
						value: '11',
					},
					{
						title: '类目十一',
						value: '12',
					},
					{
						title: '类目十二',
						value: '13',
					},
				],
				form: {
					author: '1',
					raty: '1',
				},

				lists: [{
					title: '农民工复工',
					desc: '农民工返岗复工点对点服务应对新型冠状肺炎病毒疫情',
					icon: require('../../assets/images/er/in1.png'),
					status: ""
				}, {
					title: '农民工复工',
					desc: '农民工返岗复工点对点服务应对新型冠状肺炎病毒疫情',
					icon: require('../../assets/images/er/in1.png'),
					status: ""
				}, {
					title: '同行接触自查',
					desc: '农民工返岗复工点对点服务应对新型冠状肺炎病毒疫情',
					icon: require('../../assets/images/er/in3.png'),
					status: ""
				}, {
					title: '境外输入查询',
					desc: '农民工返岗复工点对点服务应对新型冠状肺炎病毒疫情',
					icon: require('../../assets/images/er/in5.png'),
					status: ""
				}, {
					title: '境外输入查询',
					desc: '农民工返岗复工点对点服务应对新型冠状肺炎病毒疫情',
					icon: require('../../assets/images/er/in5.png'),
					status: ""
				}, {
					title: '发热门诊医院',
					desc: '农民工返岗复工点对点服务应对新型冠状肺炎病毒疫情',
					icon: require('../../assets/images/er/in6.png'),
					status: ""
				}, {
					title: '核酸检测证明',
					desc: '农民工返岗复工点对点服务应对新型冠状肺炎病毒疫情',
					icon: require('../../assets/images/er/in7.png'),
					status: ""
				}, {
					title: '核酸检测证明',
					desc: '农民工返岗复工点对点服务应对新型冠状肺炎病毒疫情',
					icon: require('../../assets/images/er/in7.png'),
					status: ""
				}],
				bg: require('../../assets/images/bg4.jpg'),
				skin: "skin3"
			}
		},
		mounted() {
			this.drawLine();
			this.drawLine2();
		},
		methods: {
			getData(data1, data2) {
				this.bg = data1
				this.skin = data2
			},
			change(e) {
				console.log(e)
			},
			filToggle() {
				if (this.filshow == 10) {
					this.filshow = 10000
				} else {
					this.filshow = 10
				}
			},
			drawLine() {
				let myChart = this.$echarts.init(document.getElementById("myChart"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						trigger: 'item',
						axisPointer: {
							// 坐标轴指示器，坐标轴触发有效
							type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
						},
					},
					grid: {
						left: '2%',
						right: '4%',
						bottom: '14%',
						top: '16%',
						containLabel: true,
					},
					xAxis: {
						type: 'category',
						data: ['1月', '2月', '3月', '4月', '5月'],
						axisLine: {
							lineStyle: {
								color: '#aab2c3',
							},
						},
						axisLabel: {
							textStyle: {
								color: '#666666',
							},
						},
					},

					yAxis: [{
						type: 'value',
						splitLine: {
							show: false,
						},
						axisLabel: {
							textStyle: {
								color: '#666666',
							},
						},
						axisLine: {
							lineStyle: {
								color: '#aab2c3',
							},
						},
					}, ],
					series: [{
							name: '调解成功',
							type: 'bar',
							barWidth: '12px',
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: '#00a5fd',
										},
										{
											offset: 1,
											color: '#4bdfff',
										},
									]),
									barBorderRadius: 2,
								},
							},
							data: [400, 400, 300, 300, 300, 400, 400, 400, 300],
						},
						{
							name: '调解失败',
							type: 'bar',
							barWidth: '12px',
							itemStyle: {
								normal: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
											offset: 0,
											color: '#01afb4',
										},
										{
											offset: 1,
											color: '#00de9e',
										},
									]),
									barBorderRadius: 2,
								},
							},
							data: [200, 500, 500, 500, 500, 400, 400, 500, 500],
						},
					],

				});
			},
			drawLine2() {
				let myChart = this.$echarts.init(document.getElementById("myChart2"));
				// 绘制图表
				myChart.setOption({
					tooltip: {
						show: true
					},
					radar: {
						radius: '80%',
						center: ['50%', '55%'],
						splitNumber: 5,
						nameGap: 10, // 图和字的间距 默认15 number
						name: {
							textStyle: {
								color: '#000',
							}
						},
						axisLine: {
							lineStyle: {
								color: '#E6E6E6'
							}
						},
						splitLine: {
							lineStyle: {
								width: 1,
								color: '#E6E6E6'
							}
						},
						splitArea: {
							areaStyle: {
								color: ['#f8f8f8', '#fff', ].reverse(),

							}
						},
						indicator: [{
								name: '1月',
								max: 100
							},
							{
								name: '2月',
								max: 100
							},
							{
								name: '3月',
								max: 100
							},
							{
								name: '4月',
								max: 100
							},
							{
								name: '5月',
								max: 100
							}
						]
					},
					series: [{
						name: 'XX指数',
						type: 'radar',
						symbolSize: 8,
						itemStyle: {},
						areaStyle: {
							normal: {
								width: 1,
								opacity: 0.3,
							},
						},
						data: [{
							itemStyle: {
								normal: {
									color: '#0083FF',
								},
							},
							value: [20, 33, 80, 50, 30]
						}, {
							itemStyle: {
								normal: {
									color: '#f9cb15',
								},
							},
							value: [54, 44, 22, 33, 55]
						}]
					}]
				});


			}
		}
	}
</script>
